<!--
 * @Descripttion: 
 * @version: 
 * @Author: ybac
 * @Date: 2022-11-04 10:37:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-03-20 10:52:28
-->
<template>
  <j-modal
    :visible.sync="modal.visible"
    :width="800"
    :title="modal.title"
    :fullscreen.sync="modal.fullscreen"
    :switchFullscreen="modal.switchFullscreen"
    @cancelVisible="cancel"
  >
    <template>
      <div class="form-wrap">
        <a-form :form="form" @submit="submit" class="form">
          <a-row class="form-row" :gutter="[48, 16]">
            <a-col :span="22">
              <a-form-item label="角色编号" prop="roleCode" :wrapper-col="{ span: 20 }" :label-col="{ span: 4 }">
                <a-input
                  v-decorator="[
                    'roleCode',
                    {
                      rules: [
                        { required: true, message: '请输入角色编号' },
                        {
                          message: '该值不可用，系统中已存在！',
                          validator: (rule, value, callback) =>
                            validateDuplicateRoleValue(value, tenantId, queryId, callback),
                        },
                      ],
                    },
                  ]"
                  placeholder="请输入"
                  :maxLength="16"
                >
                  <span slot="suffix" class="pubColor" @click="genEntityCode">自动生成</span>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="[48, 16]">
            <a-col :span="22">
              <a-form-item label="角色名称" prop="roleName" :wrapper-col="{ span: 20 }" :label-col="{ span: 4 }">
                <a-input
                  v-decorator="[
                    'roleName',
                    {
                      rules: [
                        { required: true, message: '请输入角色名称' },
                      ],
                    },
                  ]"
                  placeholder="请输入"
                  :maxLength="30"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[48, 16]">
            <a-col :span="22">
              <a-form-item label="描述" prop="description" :wrapper-col="{ span: 20 }" :label-col="{ span: 4 }">
                <a-textarea
                  :auto-size="{ minRows: 4 }"
                  :maxLength="100"
                  v-decorator="['description']"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>
    <template slot="footer">
      <a-button key="back" @click="cancel"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="submit" :loading="loadingForm"> 提交 </a-button>
    </template>
  </j-modal>
</template>

<script>
import { validateDuplicateRoleValue } from '@/utils/util'
import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
// import { sysDepartQueryAdd, sysDepartQueryEdit, sysDepartQueryTreeList } from '@/api/tenant'
import { getAction, postAction, putAction } from '@/api/manage'
export default {
  name: 'formPage',
  components: {
    JAreaLinkage,
  },
  data() {
    return {
      validateDuplicateRoleValue,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      modal: {
        title: '新建角色',
        visible: false,
        fullscreen: false,
        switchFullscreen: false,
      },
      submitApi: '',
      loadingForm: false,
      queryId: '',
      treeData: [],
      tenantId: ''
    }
  },
  created() {
    this.tenantId = this.$store.getters.tenantid
  },
  methods: {
    // 自动生成编号
    genEntityCode() {
      getAction('/sys/common/genEntityCode',{ entityCode: 'SYS_ROLE' }).then((res) => {
        if (res.code == 200) {
          this.form.setFieldsValue({
            roleCode: res.result,
          })
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },
    // 新增表单
    open() {
      this.modal.title = '新建角色'
      this.submitApi = ''
      this.queryId = ''
      this.modal.visible = true
    },
    // 编辑表单
    editor(v) {
      this.modal.title = '编辑角色'
      this.modal.visible = true
      this.submitApi = ''
      let resForm = v
      this.$nextTick(() => {
        this.form.setFieldsValue({
          roleCode: resForm.roleCode,
          roleName: resForm.roleName,
          description: resForm.description,
        })
        this.queryId = resForm.id
      })
    },
    // 提交表单
    submit() {
      this.loadingForm = true
      let submitAction = postAction
      let submitApi = '/sys/role/add'
      this.form.validateFields((err, formValues) => {
        if (!err) {
          let params = {}
          // 过滤空值、undefined、null
          for (let key in formValues) {
            if (!!formValues[key] || formValues[key] == 0) {
              params[key] = formValues[key]
            }
          }
          if (this.modal.title == '编辑角色') {
            params.id = this.queryId
            submitApi = '/sys/role/edit'
            submitAction = putAction
          }
          params.tenantId = this.$store.getters.tenantid
          submitAction(submitApi, params)
            .then((res) => {
              if (res.success) {
                this.$antdMessage.success(res.message)
                this.$emit('success')
                this.cancel()
              } else {
                this.$antdMessage.error(res.message)
              }
              this.loadingForm = false
            })
            .catch((err) => {
              this.loadingForm = false
            })
        } else {
          this.loadingForm = false
        }
      })
    },
    // 关闭表单
    cancel() {
      this.form.resetFields()
      this.loadingForm = false
      this.modal.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 12px !important;
  .ant-form-item {
    margin-bottom: 0;
  }
}
.form-wrap {
  background: #fff;
  height: 100%;
  padding: 24px;
  overflow-y: scroll;
  .code-btn {
    position: absolute;
    right: 0;
    top: -50.5px;
  }
}
.pubColor {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}
</style>
